<template>
	<view class="container">
		<!-- 蓝色头部区域 -->
		<view class="blue-header">
			<view class="navbar">
				<view class="back-btn" @click="onBack">
					<uni-icons type="left" size="24" color="#ffffff"></uni-icons>
				</view>
				<view class="title">{{orderNumber}}订单</view>
			</view>
		</view>

		<view class="white-content">
			<view class="order-image" v-if="orderNumber=='待使用'">
				<view class="info-row-image">
					<view class="iamge-text">核销码：WE342235V</view>
					<image style="width: 150rpx;" src="/static/my-item/二维码.png" mode="widthFix"></image>
				</view>
			</view>
			
			<view class="order-info">
				<view class="info-row">
					<view class="info-top">订单信息</view>
					<view class="info-status">{{orderNumber}}</view>
				</view>
				<view style="height: 7rpx;background-color: gainsboro; width: 90%;margin: 0 auto"></view>
				<view class="info">
					<view class="info-text">订单号：121212112487878</view>
					<view class="info-text">服务项目：车辆保养</view>
					<view class="info-text">服务门店：大宝车辆维修店</view>
					<view class="info-text">下单时间：2023-03-08 17：40</view>
					<view class="info-text">下单时间：2023-03-08 17：40</view>
					<view class="info-text">车辆：奔驰FWE4/豫A98FHJ</view>
					<view class="info-text">备注：</view>
				</view>
			</view>
			
			<view class="order-detail">
				<view class="info-row">
					<view class="info-top">订单详情</view>
				</view>
				<view style="height: 7rpx;background-color: gainsboro; width: 90%;margin: 5rpx auto"></view>
				<view class="info">
					<view class="info-detail-top">
						<view class="info-text">车辆清洗</view>
						<view class="info-text">￥39.90</view>
					</view>
					<view class="info-detail-top">
						<view class="info-text">车辆附加费用</view>
						<view class="info-text">0</view>
					</view>
					<view style="height: 7rpx;background-color: gainsboro; width: 90%;margin: 5rpx auto"></view>
					<view class="info-detail-top">
						<view class="info-text">原价</view>
						<view class="info-text">￥59.90</view>
					</view>
					<view class="info-detail-top">
						<view class="info-text">店家优惠</view>
						<view class="info-text" style="color: red;">-￥20</view>
					</view>
					<view style="height: 3rpx;background-color: gainsboro; width: 90%;margin: 5rpx auto"></view>
					<view class="info-detail-top">
						<view class="info-text">优惠券</view>
						<view class="info-text" style="color: red;">-￥10</view>
					</view>
					<view style="height: 7rpx;background-color: gainsboro; width: 90%;margin: 5rpx auto"></view>
				</view>
				<view class="info-detail-top">
					<view class="info-text">支付金额</view>
					<view class="info-text" style="color: green;">￥20</view>
				</view>
			</view>
			
			<view class="order-detail" v-if="orderNumber=='已完成'">
				<view class="info-row">
					<view class="info-top">评价结果</view>
				</view>
				<view style="height: 7rpx;background-color: gainsboro; width: 90%;margin: 5rpx auto"></view>
				<view class="info">
					<view class="info-text">评价时间：2023-03-08 17：40</view>
					<view class="info-text">评价结果：
						<image class="xing" src="/static/my-item/五星 拷贝 4@2x.png" mode="widthFix"></image>
					</view>
					<view class="info-text">评语：奔驰FWE4/豫A98FHJ</view>
				</view>
			</view>
			
			<!-- 底部按钮区域（根据订单状态动态显示） -->
			<view class="bottom-bar">
				<view class="contact-service" @click="handleContact">
					<image class="kefu" src="/static/my-item/客服@2x.png" mode="widthFix"></image>
					<text>联系客服</text>
				</view>
				<view class="order-btns">
					<button 
						v-for="(btn, idx) in currentButtons" 
						:key="idx"
						:class="btn.class"
						@click="handleBtnAction(btn.action)"
					>
						{{ btn.text }}
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderNumber: '',
				// 状态与按钮的映射关系（与订单列表页保持一致）
				statusButtons: {
					'待支付': [
						{ text: '取消订单', class: 'cancel-btn', action: 'cancel' },
						{ text: '立即支付', class: 'pay-btn', action: 'pay' }
					],
					'待使用': [
						{ text: '申请退款', class: 'cancel-btn', action: 'refund' },
						{ text: '扫码结算', class: 'pay-btn', action: 'view_code' }
					],
					'待评价': [
						{ text: '立即评价', class: 'cancel-btn', action: 'evaluate' },
						{ text: '再来一单', class: 'pay-btn', action: 'repeat' }
					],
					'已完成': [
						{ text: '再来一单', class: 'pay-btn', action: 'repeat' }
					],
					'已取消': [
						{ text: '重新下单', class: 'pay-btn', action: 'reorder' }
					],
					'已退款': [
						{ text: '重新下单', class: 'pay-btn', action: 'reorder' }
					]
				}
			};
		},
		computed: {
			// 根据当前订单状态获取对应按钮
			currentButtons() {
				// 从statusButtons中匹配当前订单状态对应的按钮，默认显示空数组
				return this.statusButtons[this.orderNumber] || [];
			}
		},
		onLoad(options) {
			// 接收路由传递的订单状态参数
			this.orderNumber = options.orderNumber;
		},
		methods: {
			onBack() {
				uni.navigateBack();
			},
			// 联系客服
			handleContact() {
				uni.showToast({
					title: '联系客服功能',
					icon: 'none'
				});
			},
			// 处理按钮点击事件
			handleBtnAction(action) {
				switch(action) {
					case 'cancel':
						// 取消订单逻辑（与列表页保持一致）
						uni.showModal({
							title: '提示',
							content: '确定要取消订单吗？',
							success: (res) => {
								if (res.confirm) {
									uni.showToast({ title: '订单已取消', icon: 'success' });
									// 取消后返回列表页
									setTimeout(() => {
										uni.navigateBack();
									}, 1000);
								}
							}
						});
						break;
					case 'pay':
						// 立即支付
						uni.navigateTo({
							url: `/pages/payment/payment?orderId=${this.orderNumber}`
						});
						break;
					case 'refund':
						// 申请退款
						uni.showToast({ title: '申请退款功能', icon: 'none' });
						break;
					case 'view_code':
						// 查看核销码
						uni.navigateTo({
							url: `/pages/couponCode/couponCode?orderId=${this.orderNumber}`
						});
						break;
					case 'evaluate':
						// 立即评价
						uni.navigateTo({
							url: `/my-item/Order/carClean`
						});
						break;
					case 'repeat':
					case 'reorder':
						// 再来一单/重新下单
						uni.navigateTo({
							url: `/pages/order/order?service=车辆保养`
						});
						break;
				}
			}
		}
	};
</script>

<style>
	.container {
		/* 页面高度占满屏幕 */
		min-height: 100vh;
		background-color: rgb(245, 245, 245);
		display: flex;
		flex-direction: column;
	}

	.navbar {
		display: flex;
		align-items: center;
		padding: 2rpx 2rpx;
		position: relative;
		/* 添加相对定位 */
	}

	.title {
		font-size: 38rpx;
		font-weight: 400;
		position: absolute;
		/* 绝对定位 */
		left: 50%;
		/* 水平居中 */
		transform: translateX(-50%);
		/* 调整中心点 */
	}

	.blue-header {
		position: relative;
		background-color: #007AFF;
		color: white;
		padding-bottom: 150rpx;
	}

	.white-content {
		/* 原有样式保持不变 */
		position: relative;
		z-index: 10;
		flex: 4;
		width: 90%;
		background-color: #f5f5f5;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		margin-left: 45rpx;
		margin-top: -100rpx;
		/* 增大底部内边距，避免被底部按钮覆盖 */
		padding-bottom: 150rpx;
	}

	.order-info {
		position: relative;
		background-color: white;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
		transition: transform 0.2s;
	}

	.info-row {
		display: flex;
		/* 开启 flex 布局 */
		align-items: center;
		/* 垂直居中对齐 */
	}

	.info-top {
		font-weight: 600;
		margin-left: 15rpx;
		margin-right: 350rpx;
	}

	.info-status {
		color: rgb(255, 191, 175);
	}

	.info-text {
		margin-left: 30rpx;
		font-size: 16rpx;
	}

	.order-detail {
		position: relative;
		margin-top: 20rpx;
		background-color: white;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
		transition: transform 0.2s;
	}

	.info-detail-top {
		display: flex;
		/* 使用flex布局 */
		justify-content: space-between;
		/* 两端对齐 */
		width: 100%;
		/* 确保占满父容器宽度 */
	}

	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-between;
		width: 100%;
		background-color: #fff;
		padding: 15rpx 10rpx;
		border-top: 1rpx solid #eee;
		z-index: 5;
	}

	.contact-service {
		display: flex;
		align-items: center;
		margin-right: 20rpx;
	}

	.contact-service text {
		margin-left: 10rpx;
		font-size: 28rpx;
	}

	.order-btns {
		display: flex;
		justify-content: flex-end;
	}

	.cancel-btn {
		background-color: #ddd;
		color: #333;
		border-radius: 40rpx;
		font-size: 28rpx;
		margin-right: 30rpx;
	}

	.pay-btn {
		background-color: #007AFF;
		color: #fff;
		border-radius: 40rpx;
		font-size: 28rpx;
		margin-right: 30rpx;
	}

	.kefu {
		width: 35rpx;
	}
	.xing{
		width: 30rpx;
	}
	.order-image{
		position: relative;
		background-color: white;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
		transition: transform 0.2s;
		margin-bottom: 10rpx;
	}
	.iamge-text{
		font-size: 15rpx;
		
	}
	.info-row-image{
		text-align: center;
	}
</style>
